<template>
  <div class="loading-box">
    <div class="loading"></div>
  </div>
</template>

<script>
export default {
  name: 'Loading', // 定义的组件名称 使用时写法：loading
  data () {
    return {}
  }
}
</script>

<style scoped>
.loading-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}
.loading {
  width: 64px;
  height: 64px;
  clear: both;
  margin: 40px auto;
  border: 8px rgba(0, 0, 0, 0.25) solid;
  border-top: 8px black solid;
  border-radius: 50%;
  -webkit-animation: spCircRot .6s infinite linear;
  animation: spCircRot .6s infinite linear;
 }
 @-webkit-keyframes spCircRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>
